<!--公共头部-->
{template 'aitimt/common/login_header'}
<style>
    * {touch-action: pan-y;}
    body{background: #ffffff;}
    .login_box{background: #FFF;border-radius: 4px;display: block;padding: 15px;position: fixed;top:3rem;width: 90%;left:5%}
    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */color: #e4e4e4;font-size: 14px;}
    ::-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #e4e4e4;font-size: 14px;}
    ::-moz-placeholder { /* Mozilla Firefox 19+ */color: #e4e4e4;font-size: 14px;}
    ::-ms-input-placeholder { /* Internet Explorer 10-11 */color: #e4e4e4;font-size: 14px;}
    .login_head h2 {font-size: 0.8rem;line-height: 16px;margin-bottom: 16px;color:#06bf04;text-align: center;font-weight: normal}
    .mui-input-row{border-bottom: 1px solid #e4e4e4;}
    .mui-input-row input{border:0;margin: 0;}
    .btn_login{width:100%;border-radius:15px;height:2.2rem;line-height: 35px;display: block;background-color:#f39800;font-size:15px;text-align: center;margin:17px auto 0;color:#FFF;}
    .btn_login:hover{color:#FFF}
    .mui-input-row label {width: 25%;}
    .mui-input-row label ~ input, .mui-input-row label ~ select, .mui-input-row label ~ textarea{width: 75%;}
    .login-xieyi{width: 110%;margin-left: -18px;font-size:12px;text-align: center;margin-top: 50%;}
    .welcome{font-size: 20px;color: #4e4e4e;}
    .login-type{padding-top: 15px;font-size: 13px;}
    .login-other{padding:15px 0;float: left;display: flex;width: 100%;font-size: 13px;}
    .login-weixin{width: 100%;border-radius:15px; height: 35px;font-size: 15px;color: #ffffff;background: #f39800;}
    /*协议*/
    .mui-popover .mui-scroll-wrapper .mui-scroll{background: white;padding: 0 5%;}
    .mui-popover .mui-scroll p{color: #0C0C0C;}
    .mui-popover .mui-scroll-wrapper{height: 85%;margin: 5%;width: 90%;}
    .pop-btn{height: 2.2rem;margin: 0 5% 10% 5%;width: 90%;border-radius: 20px;font-size: 15px;color: #ffffff;background: #f39800;display: block;text-align: center;line-height: 2.2rem;position: absolute;bottom: 0}

</style>
</head>
<body>
<div class="mui-content">

    <div id="userAgreement"  style="z-index: 999;height: 100%" class="box mui-popover mui-popover-action mui-popover-bottom">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                {$_W['_config']['joinagreement']}
            </div>
        </div>
        <a type="button" class="pop-btn" href="#userAgreement">
            确认并关闭
        </a>
    </div>
    <div id="hideAgreement"  style="z-index: 999;height: 100%" class="box mui-popover mui-popover-action mui-popover-bottom">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                {$_W['_config']['proagreement']}
            </div>
        </div>
        <a type="button" class="pop-btn" href="#hideAgreement">
            确认并关闭
        </a>
    </div>
    <div class="login_box">
        <p class="welcome">欢迎登录爱计时赛事平台</p>
        <div class="mui-input-row">
            <input type="text" id='mobile' placeholder="请输入手机号"/>
        </div>
        <div class="mui-input-row" id="codeIn">
            <input type="text" id='code'  style="width: 65%;" placeholder="请输入验证码"/>
            <button onclick="sendSms()" id="getCode" style="width: 28%;font-size: 15px;border: 0;">获取验证码</button>
        </div>
        <div class="mui-input-row" id="pwdIn" style="display: none;">
            <input type="password" id='pwd' placeholder="请输入密码"/>
        </div>
        <a class="btn_login" id="btn_login">登录</a>
        <div class="login-type">
            <span onclick="loginType(this)">密码登录</span>
            <a style="float:right;" href="{php echo app_url('home/index/login2')}">忘记密码</a>
        </div>
        <div class="login-other">
            <hr style="width: 30%;">
            <span>其他登录方式</span>
            <hr style="width: 30%;">
        </div>
        <button type="button" class="login-weixin" onclick="getLogin('weixin')">
            微信一键登录
        </button>
        <p class="login-xieyi">登陆代表您已同意爱计时赛事平台<a href="#userAgreement">用户协议</a>、<a href="#hideAgreement">隐私协议</a></p>
    </div>

</div>
<script type="text/javascript">

    mui.init();
    mui('.mui-scroll-wrapper').scroll({
        scrollY: true, //是否竖向滚动
    });
    function loginType(val){
        var code=document.getElementById('codeIn'),
            pwd=document.getElementById('pwdIn');
        if (val.innerText=='密码登录'){
            val.innerText='验证码登录';
            localStorage.setItem('type','pwd');
            code.style="display:none";
            pwd.style="display:block";
        }else{
            val.innerText='密码登录';
            localStorage.setItem('type','code');
            code.style="display:block";
            pwd.style="display:none";
        }
        console.log(localStorage.getItem('type'))
    }
    //数据发送
    function getLogin(type){
        $.post("{php echo app_url('home/index/login')}", {type:type}, function(data){
            console.log(data);
            if(data.errno == 0){
                location.href = data.url;
            }else{
                mui.toast('服务器错误！');
            }
        },"json");
    }
    document.getElementById("btn_login").addEventListener('tap', function() {
        var code = $.trim($("#code").val());
        var mobile = $.trim($("#mobile").val());
        var pwd = $.trim($("#pwd").val());
        var mobile_pattern = /(?:\(?[0\+]?\d{1,3}\)?)[\s-]?(?:0|\d{1,4})[\s-]?(?:(?:13\d{9})|(?:\d{7,8}))/;
        if (mobile == '') {
            mui.toast('请输入手机号');
            $('#mobile').focus();
            return false;
        }
        if (!mobile_pattern.test(mobile)) {
            mui.toast('请输入正确的手机号');
            $('#mobile').focus();
            return false;
        }
        if (localStorage.getItem('type')!='pwd'||localStorage.getItem('type')==''){
            if (code == '') {
                mui.toast('请输入验证码');
                $('#code').focus();
                return false;
            }
            if (code!=localStorage.getItem('code')){
                mui.toast('验证码错误');
                $('#code').focus();
                return false;
            }
            var arr={mobile:mobile};
            sendPost(arr);
        } else {
            if (pwd == '') {
                mui.toast('请输入密码');
                $('#code').focus();
                return false;
            }
            var arr={type:'pwd',mobile:mobile,pwd:pwd};
            sendPost(arr);

        }
    });
    function sendPost(arr) {
        $.post("{php echo app_url('home/index/login1')}", arr, function(data){
            console.log(data);
            if(data.errno == 0){
                location.href = data.url;
            }else{
                mui.toast(data.msg);
            }
        },"json");
    }
    function sendSms() {
        var mobile = $.trim($("#mobile").val());
        var mobile_pattern = /(?:\(?[0\+]?\d{1,3}\)?)[\s-]?(?:0|\d{1,4})[\s-]?(?:(?:13\d{9})|(?:\d{7,8}))/;
        if (mobile == '') {
            mui.toast('请输入手机号');
            $('#mobile').focus();

            return false;
        }
        if (!mobile_pattern.test(mobile)) {
            mui.toast('请输入正确的手机号');
            $('#mobile').focus();
            return false;
        }
        $.post("{php echo app_url('home/index/login1')}", {type:'sms',mobile:mobile}, function(data){
            console.log(data);
            if(data.errno == 0){
                mui.toast(data.msg);
                time();
                localStorage.setItem('code',data.code);
            }else{
                mui.toast('服务器错误！');
            }
        },"json");
    }
    var wait=60;
    function time(){
        var o=document.getElementById('getCode');
        if (wait==0) {
            o.removeAttribute("disabled");
            o.innerHTML="获取验证码";
            o.style.backgroundColor="#fff";
            wait=60;
        }else{
            o.setAttribute("disabled", true);
            o.innerHTML=wait+"(s)";
            o.style.backgroundColor="#8f8b8b";
            wait--;
            setTimeout(function(){
                time(o)
            },1000)
        }
    }
</script>
</body>
</html>
